<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      default-expand-all
    >
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="code" label="权限值" />
      <el-table-column prop="updateTime" label="修改时间" />
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button
            type="primary"
            @click="tjcd(scope.row)"
            :disabled="scope.row.level == 4 ? true : false"
          >
            {{ scope.row.level == 3 ? "添加功能" : "添加菜单" }}
          </el-button>
          <el-button
            type="primary"
            size="small"
            @click="bj(scope.row)"
            :disabled="scope.row.level == 1 ? true : false"
          >
            编辑
          </el-button>
          <el-button
            type="primary"
            @click="remove(scope.row.id)"
            size="small"
            :disabled="scope.row.level == 1 ? true : false"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="dialogVisible"
      title="添加菜单"
      width="30%"
      :before-close="handleClose"
    >
      <el-input
        placeholder="请输入菜单名称"
        v-model="name"
        style="margin-bottom: 10px"
      ></el-input>
      <el-input placeholder="请输入权限数值" v-model="code"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">Cancel</el-button>
          <el-button type="primary" @click="qd"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
     <el-dialog
      v-model="dialogVisible1"
      title="编辑菜单"
      width="30%"
      :before-close="handleClose1"
    >
      <el-input
        placeholder="请输入菜单名称"
        v-model="form.name"
        style="margin-bottom: 10px"
      ></el-input>
      <el-input placeholder="请输入权限数值" v-model="form.code"></el-input>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible1 = false">Cancel</el-button>
          <el-button type="primary" @click="qd1"> 确定 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import instance from "../assets/axiosinstance";
import { ElMessage, ElMessageBox } from "element-plus";
const tableData = ref([]);
const dialogVisible = ref(false);
const dialogVisible1 = ref(false);
const name = ref("");
const code = ref("");
const level = ref("");
const form = ref({});
const pid = ref("");
const handleClose = () => {
  dialogVisible.value = false;
};
const handleClose1 = () => {
  dialogVisible1.value = false;
};
const remove=(e)=>{
console.log(e)
 ElMessageBox.confirm("是否确认删除该条数据?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
    type: "warning",
  })
    .then(async () => {
      const res = await instance.delete(`/admin/acl/permission/remove/${e}`);
      console.log(res);
      if (res.code == 200) {
        getdata();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
}
const bj=(row)=>{
  form.value=JSON.parse(JSON.stringify(row));
  dialogVisible1.value = true;
}
const tjcd = (row) => {
  dialogVisible.value = true;
  name.value="";
  code.value="";
  pid.value = row.id;
  level.value = row.level + 1;
};
const qd1 = async () => {
  const res = await instance.put("admin/acl/permission/update", form.value);
  console.log(res);
  if (res.code == 200) {
    dialogVisible1.value = false;
    getdata()
  }
};
const qd = async () => {
  const res = await instance.post("admin/acl/permission/save", {
    code: code.value,
    id: 0,
    level: level.value,
    name: name.value,
    pid: pid.value,
  });
  console.log(res);
  if (res.code == 200) {
    dialogVisible.value = false;
    getdata()
  }
};
const getdata = async () => {
  const res = await instance.get("admin/acl/permission");
  console.log(res);
  tableData.value = res.data;
};
onMounted(() => {
  getdata();
});
</script>